<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>潮流资讯</title>
		<link rel="stylesheet" type="text/css" href="../css/trends.css" />
		<link rel="stylesheet" href="../css/index-top.css">
		<script src="../js/vue.global.prod.js"></script>
		<script src="../js/axios.min.js"></script>
		<style>

		</style>
	</head>
	<body>
		<div id="wen">
			<div>
				<!-- 弹出层 -->
				<div :class="['Popup',ishow?'openActive':'']">
					<div class="tiantop">
						<div class="tuimgg">
							<a href="../index.html"><img src="../img/qqqw.png" alt="" class="we"><img
									src="../img/xiang.png" alt=""></a><span>小象服装</span>
						</div>
						<div @click="dengqu"><img style="width: 35px;margin-top: 11px;" src="../img/c.png" alt=""></div>
					</div>
					<div style="border-top: 2px saddlebrown solid;width: 100%; margin-bottom: 25px;"></div>

					<div class="from">
						<div class="zuo-from">
							<div class="denglu">
								登录
							</div>
							<div class="shuru">
								<div>区号</div>
								<div class="phonp"><span>中国 (+86)</span><input type="text" /><select name="111"
										id=""></select>
								</div>
								<div class="phonp"><span>电话号码*</span><input type="text" /></div>
								<div class="phonp"> <span>输入密码*</span><input type="password" /></div>
								<div class="wang"><a href="#">忘记密码?</a></div>
								<div class="danxuan">
									<div class="dui" @click="danxuan"><img src="../img/dui.png" alt="" v-if='xiao'>
									</div>
									<span>记住我</span>
								</div>
								<button class="sutter" @click="dengqu">登录</button>
							</div>
						</div>
						<div class="you-from">
							<div class="denglu">
								创建账户
							</div>
							<ul class="lie">
								<li>将您心仪的商品加入收藏夹、</li>
								<li>保存您的联系人信息以进行快速结算。</li>
								<li>关注您的订单状态。</li>
							</ul>
							<button class="suter">创建账户</button>
						</div>
					</div>
				</div>
				<div :class="['Popup',isho?'openActive':'']">
					<div class="hui">

					</div>
					<div class="tiantopp">
						<div class="tuimggg">
							<a href="../index.html"><img src="../img/qqqw.png" alt="" class="we"><img
									src="../img/xiang.png" alt=""></a><span>小象服装</span>
						</div>
						<div @click="shouqu"><img style="width: 35px;margin-top: 11px;" src="../img/c.png" alt=""></div>
					</div>
					<div class="dier"></div>

					<div class="shou">
						<div class="lift-zuo">
							<p style="font-weight: 600;">不要错过您心仪的商品</p>
							<p style="font-size: 13px;margin-top: 16px;">线上精品店注册，您可以随时访问您的心愿清单并查看心
								仪商品</p>
							<button class="dengl">登录</button>
							<button class="dengl">注册</button>
						</div>
						<div class="lift-you">
							<h3>心愿清单</h3>
							<p style="margin-top: 15px;">您的心愿清单中暂无商品</p>
							<button class="dengll" @click="shouqu">继续购物</button>
						</div>
					</div>

				</div>
				<div :class="['Popup',ish?'openActive':'']">
					<div class="tiantop">
						<div class="tuimgg">
							<a href="../index.html"><img src="../img/qqqw.png" alt="" class="we"><img
									src="../img/xiang.png" alt=""></a><span>小象服装</span>
						</div>
						<div @click="gouqu"><img style="width: 35px;margin-top: 11px;" src="../img/c.png" alt=""></div>
					</div>
					<div style="border-top: 2px saddlebrown solid;width: 100%; margin-bottom: 25px;"></div>
					<div class="zuob">
						<h3>您的购物袋</h3>
						<p style="margin-top: 15px;">您的购物袋中设有商品</p>
						<button class="dengll" @click="gouqu">继续购物</button>
						<p style="margin-top: 50px;">最近浏览</p>
					</div>
				</div>
				<!-- top -->
				<div class="head">
					<div class="header">
						<div class="tuimg">
							<a href="./index.html"><img src="../img/qqqw.png" alt="" class="we"><img
									src="../img/xiang.png" alt=""></a><span>小象服装</span>
						</div>
						<div class="noe">
							<img src="../img/qwe.png" alt="" @click="dan">
						</div>
						<div class="zhong">
							<button>搜 索</button>
							<input type="text" />
						</div>
						<div class="right-box">
							<div class="right-box-right" @click="deng"> <img src="../img/me1.jpg" alt=""><span>登录</span>
							</div>
							<div class="right-box-right" @click="shou"> <img src="../img/shou.png"
									alt=""><span>我的收藏</span>
							</div>
							<div class="right-box-right" @click="gou"><img src="../img/gou.png" alt="">
								<span>我的购物袋</span>
							</div>
						</div>
					</div>
				</div>




				<div :class="['Popups',iqoo?'openActive':'']">
					<div class="tiantop">
						<div class="tuimgg">
							<a href="../index.html"><img src="../img/xiang.png" alt=""></a><span>小象服装</span>
						</div>
						<div @click="iqooqu"><img style="width: 35px;margin-top: 11px;" src="../img/c.png" alt=""></div>
					</div>
					<div class="daoh"><a href="../index.html">首页</a></div>
					<div class="daoh"> <a href="../new.html">新季新品</a></div>
					<div class="daoh"> <a href="../case.html">案例展示</a></div>
					<div class="daoh"> <a href="../trend.html">潮流资讯</a></div>
					<div class="daoh"><a href="../customized.html">预约制定</a></div>
					<div class="daoh"><a href="../brand.html">品牌理念</a></div>
					<div class="daoh"><a href="../conteact.html">联系我们</a></div>
				</div>

				<!-- 导航 -->
				<div class="box-nav">
					<div class="nav">
						<ul>
							<li><a href="../index.html">首页</a></li>
							<li class="p"><a href="../new.html">新季新品</a></li>
							<li><a href="../case.html">案例展示</a></li>
							<li><a href="../trend.html">潮流资讯</a></li>
							<li><a href="../customized.html">预约制定</a></li>
							<li><a href="../brand.html">品牌理念</a></li>
							<li><a href="../conteact.html">联系我们</a></li>
						</ul>
					</div>
				</div>
			</div>

			<div class="content">
				<div class="cont-top">
					<img src="../img/trends11.png" style="width: 48%;" />
					<div class="top-r">
						<p class="title"></p>
						<p class="right-p">采用新的面料、辅料和工艺，对织物的结构,色彩、花型等要求也较高。在款式、造型、色彩、纹样、缀饰等方面不断变化创新、标新立异。</p>
						<p class="math">￥</p>
						<p class="white">颜色:</p>
						<p>尺码：</p>
						<li>36</li>
						<li>38</li>
						<li>40</li>
						<li>42</li>
						<li>44</li>
						<li>46</li>
						<li>48</li>
						<li>50</li>
						<li>36s</li>
						<li>36s</li>
						<li>40s</li>
						<li>42s</li>
						<li>44s</li>
						<li>46s</li>
						<p class="a"><img src="../img/rouler.png" style="margin-right: 10px;" />尺码指南</p>
						<button @click='qqq(data.list)'>加入购物袋</button>
						<p style="display: inline-block;font-weight: bold;">精品店查找</p>
						<p class="top-b"><a href="trendss1.html">产品详情</a></p>
					</div>
				</div>
				<div class="cont-center">
					<div class="ash">
						<img src="../img/trends.png" />
						<p>商品详情</p>
					</div>
					<div class="center-four">
						<div class="one">
							产品名称:<br />
							款式:<br />
							款型:<br />
							展示面料:<br />
							色彩:

						</div>
						<div class="one">
							【2022新品】时尚系列女士服装<br />
							短款韩版上衣<br />
							外套<br />
							面料:67%棉33%纤维罗纹:93%<br />
							白色

						</div>
						<div class="one">
							运动类型:<br />
							产品系列:<br />
							性别:<br />
							展示上市季:

						</div>
						<div class="one">
							运动生活<br />
							运动生活系列<br />
							中<br />
							2022-09-16

						</div>

					</div>
					<img src="../img/trend22.png" style="width: 60%;" />
				</div>
				<div class="cont-bottom">
					<div class="ash">
						<img src="../img/trends.png" />
						<p>尺码对照表</p>
					</div>
					<table>
						<tr>

							<th>页面显示尺码</th>
							<th>XS</th>
							<th>S</th>
							<th>M</th>
							<th>L</th>
							<th>XL</th>
							<th>XXL</th>
							<th>3XL</th>
							<th> </th>
						</tr>
						<tr>
							<td>女生上装</td>
							<td>XS</td>
							<td>S</td>
							<td>M</td>
							<td>L</td>
							<td>XL</td>
							<td>XXL</td>
							<td>3XL</td>
							<td> </td>
						</tr>
						<tr>
							<th>女士裤装</th>
							<th>-</th>
							<th>S-M</th>
							<th>L-XL</th>
							<th>XXL</th>
							<th>-</th>
							<th>-</th>
							<th>-</th>
							<th> </th>
						</tr>
						<tr>
							<td>尺码/cm</td>
							<td>160/80A</td>
							<td>165/84A</td>
							<td>170/88A</td>
							<td>175/92A</td>
							<td>180/96A</td>
							<td>185/100A</td>
							<td>190/104A</td>
							<td> </td>
						</tr>
					</table>
				</div>
			</div>
			<div class="foot">
				<div class="foot1">
					<div class="zuo">
						<span><img src="../img/qie.png" alt=""
								style="width: 20px;height: 20px;margin-top: 5px;">在线客服</span>
						<p>热线电话:123456789123</p>
						<p>工作时间:周一到周五9:00-8:00</p>
						<p>办公地址:山东省泰安市XX区XX街道</p>
					</div>
					<div class="you">
						<img src="../img/333.png" alt=""><span>扫码关注</span>
					</div>
				</div>
				<div class="foot2">
					<fOrm>
						<div class="san"><input type="text" placeholder="* 请输入你的名字"> <input type="text"
								placeholder="* 请输入你的细节要求">
							<input type="text" placeholder="* 请输入你的电话">
						</div>
						<div><textarea name="" id="" cols="30" rows="10" placeholder=" 请输入你的详细地址"></textarea></div>
						<div><button>马上提交</button></div>
					</fOrm>
				</div>
			</div>
			<div class="footss">
				<div class="foots">
					<div class="foots-zuo">
						<span class="span1"><img src="../img/qie.png" alt=""
								style="width: 20px;height: 20px;margin-top: 5px;">在线客服</span>
						<div class="yoo-item">
							<img src="../img/333.png" alt="">
							<span class="yoo-item-zi">扫码关注</span>
						</div>
					</div>
					<div class="foots-zhong">
						<input type="text" placeholder="* 请输入你的名字"> <input type="text" placeholder="* 请输入你的细节要求">
						<input type="text" placeholder="* 请输入你的电话">
					</div>
					<div class="foots-you">
						<div><textarea class="duoshu" name="" id="" cols="30" rows="10"
								placeholder=" 请输入你的详细地址"></textarea>
						</div>
						<input type="submit" name="" id="">
						<div><button>马上提交</button></div>
					</div>
				</div>
				<div class="ziti">
					<div>热线电话:123456789123</div>
					<div>工作时间:周一到周五9:00-8:00</div>
					<div>办公地址:山东省泰安市XX区XX街道</div>
				</div>

			</div>
		</div>
	</body>
	<script>
		const App = {
			data() {
				return {
					ishow: false,
					isho: false,
					ish: false,
					xiao: false,



				}
			},
			mounted() {
				this.getinitial()
			},

			methods: {
				getinitial() {
					this.axios.post("http://180.76.120.179:8081/fushi/trend/atrend")
						.then(res => {
							console.log(res)
						})
				},


				deng: function() {
					this.ishow = true
				},
				shou: function() {
					this.isho = true
				},
				gou: function() {
					this.ish = true
				},
				dengqu: function() {
					this.ishow = false
				},
				shouqu: function() {
					this.isho = false
				},
				gouqu: function() {
					this.ish = false
				},
				danxuan() {
					this.xiao = !this.xiao
				},
				dan() {
					this.iqoo = true
				},
				iqooqu: function() {
					this.iqoo = false
				},

			},
		};
		Vue.createApp(App).mount('#wen');
		var mySwiper = new Swiper('.swiper', {
			loop: true, // 循环模式选项
			autoplay: true,
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
			},
			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			// 如果需要滚动条
			scrollbar: {
				el: '.swiper-scrollbar',
			},
		})
	</script>
</html>
